<template>
    <div class="payType">
        <TopDesc :desc="'সোনার টাকা'" info="সময়মত পেমেন্ট করার পরে আরও টাকা পান"></TopDesc>
        <div class="kefu" @click="$router.push('/kefuList')">
            <img src="../../assets/images/kefu .png" alt="">
        </div>
        <div class="pt-desc">
            <div class="pt-title">পরিশোধের পরিমাণ</div>
            <div class="pt-bdt">{{ orderInfo.currencyType }} {{ orderInfo.loanAmount }}</div>
            <div class="pt-content">
                <div class="pt-key">
                    <ul>
                        <li>লোন নম্বর</li>
                        <li>টেলিফোন নাম্বার</li>
                        <li>ব্যাঙ্ক কার্ড নম্বর</li>
                        <li>ঋণের মেয়াদ (দিন)</li>
                        <li>শেষের তারিখ</li>
                        <li>স্বার্থ</li>
                        <li>মোট খরচ</li>
                    </ul>
                </div>
                <div class="pt-value">
                    <ul>
                        <li>{{ orderInfo.orderId }}</li>
                        <li>{{ orderInfo.phone }}</li>
                        <li>{{ orderInfo.bankCard }}</li>
                        <li>{{ orderInfo.loanTerm }}{{ orderInfo.termUnit }}</li>
                        <li>{{ new Date(orderInfo.expiryTime).toLocaleString() }}</li>
                        <li>{{ orderInfo.interestAmount }}</li>
                        <li>{{ orderInfo.loanAmount }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <ButtomDesc></ButtomDesc>
        <div class="pt-btn">
            <div class="pt-btn-left" @click="toAllPay">পরিশোধ</div>
            <div class="pt-btn-right" @click="$router.push('/zhanqi')">বিলম্ব</div>
        </div>
        <van-dialog v-model="show" :showConfirmButton="false">
            <payTypeInfo @guanbitanceng="guanbitanceng"></payTypeInfo>
        </van-dialog>
    </div>
</template>
<script>
import payTypeInfo from './payTypeInfo'
export default {
    components: { payTypeInfo },
    data() {
        return {
            show: false
        }
    },
    methods: {
        toAllPay() {
            this.show = true
        },
        //子组件关闭弹层
        guanbitanceng() {
            this.show = false
        },
    },
    computed: {
        orderInfo() {
            return this.$store.state.orderInfo
        }
    }
}
</script>

<style lang="less" scoped>
.payType {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    position: relative;
    padding-top: (100/@a);

    .pt-desc {
        width: (330/@a);
        height: (323/@a);
        background: #FFFFFF;
        border-radius: (16/@a);
        margin-top: (13/@a);
        margin-left: (23/@a);
        padding-top: (12/@a);
        box-sizing: border-box;

        .pt-content {
            width: (330/@a);
            height: (200/@a);
            // background-color: red;
            margin-top: (15/@a);
            display: flex;
            box-sizing: border-box;
            padding: 0 (20/@a);

            ul {
                li {
                    margin-top: (10/@a);
                }
            }

            .pt-key {
                width: (165/@a);
                height: (200/@a);
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #2D2D2D;
            }

            .pt-value {
                width: (165/@a);
                height: (200/@a);
                text-align: right;
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #626262;
            }
        }

        .pt-title {
            margin-left: (102/@a);
            font-size: (13/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #262626;
        }

        .pt-bdt {
            margin-top: (22/@a);
            margin-left: (70/@a);
            font-size: (33/@a);
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: #415AB8;
        }
    }

    .kefu {
        width: (66/@a);
        height: (59/@a);
        position: absolute;
        right: (5/@a);
        top: (130/@a);

        img {
            width: 100%;
        }
    }

    .pt-info {
        width: (294/@a);
        height: (30/@a);
        font-size: (10/@a);
        font-family: Nirmala UI;
        font-weight: 400;
        color: #7D7D7D;
        line-height: (16/@a);
        margin-top: (22/@a);
        margin-left: (38/@a);
    }

    .pt-btn {
        display: flex;
        justify-content: space-around;

        .pt-btn-left {
            width: (147/@a);
            height: (53/@a);
            background: #415AB8;
            border-radius: (10/@a);
            text-align: center;
            line-height: (53/@a);
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF;
        }

        .pt-btn-right {
            width: (147/@a);
            height: (53/@a);
            background: #e4e4e4;
            border-radius: (10/@a);
            text-align: center;
            line-height: (53/@a);
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF;
        }
    }
}
</style>